@import models.Tables.PhenotypeRow

@(row: PhenotypeRow,name:Seq[String])(implicit session: Session)
@title = @{
    session.get("lang") match {
        case Some("cn") => "表型信息"
        case _ => "Phenome"
    }
}

    @config.main(row.code) {
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("swiper-8.0.7/swiper8/swiper-bundle.min.css")">

    <style>
            .swiper {
                max-width: 800px;
                width: 100%;
                height: 100%;
                padding-bottom: 50px;
            }

            .swiper {
                max-width: 800px;
                width: 100%;
                height: 100%;
                padding-bottom: 50px;
            }

            .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
            }

            .swiper-slide img {
                display: block;

                margin-bottom: 10px;
                width: 100%;
                height: 100%;
               max-height: 500px;
                object-fit: cover;
            }

    </style>

        <div class="body-box">
            <div class="page-box">

                @config.subTitle(row.code, title, "/COADB/phenotype/phenotypePage" )

                <div class="main-body detail-info" style="position: relative">


                    <div class="row">


                        <div class="col-lg-6">
                            <div class="swiper mySwiper">
                                <div class="swiper-wrapper">

                                @for(n <- name){

                                    <div class="swiper-slide">
                                        <a data-fancybox="group1" href='/COADB/phenotype/getPhoto2/@n'>
                                            <img src='/COADB/phenotype/getPhoto2/@n'  class="slide-img" />

                                        </a>
                                    </div>

                                }

                                </div>
                                    <!-- Add Pagination -->
                                <div class="swiper-pagination  "></div>

                            </div>
                        </div>


                        <div class="col-lg-6">
                            <div class="blog-sidebar">

                                <table class="table table-germ">
                                    <tbody>
                                        <tr>
                                            <th>Sample</th>
                                            <td>@{row.code}</td>
                                        </tr>
                                        <tr>
                                            <th>Collect Info</th>
                                            <td>@{row.collect}</td>
                                        </tr>
                                        <tr>
                                            <th>Longitude</th>
                                            <td>@{row.lon}</td>
                                        </tr>
                                        <tr>
                                            <th>Latitude</th>
                                            <td>@{row.lat}</td>
                                        </tr>
                                        <tr>
                                            <th>Altitude</th>
                                            <td>@{row.altitude}</td>
                                        </tr>
                                        <tr>
                                            <th>Trait</th>
                                            <td>@{row.`trait`}</td>
                                        </tr>
                                        <tr>
                                            <th>Fruit</th>
                                            <td>@{row.fruit}</td>
                                        </tr>
                                        <tr>
                                            <th>Note</th>
                                            <td>@{row.note}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>


                </div>
            </div>
        </div>
        <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("swiper-8.0.7/swiper8/swiper-bundle.min.js")" type="text/javascript"></script>

        <script>

            $(function (){
                new Swiper(".mySwiper", {
                    pagination: {
                        el: ".swiper-pagination",
                    },
                    speed: 3000,
                    autoplay: {
                        delay: 3500,
                        disableOnInteraction: false,
                    },

                });
            })


        </script>
    }